<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!-- 1.   .stop 修饰符 阻止 点击事件的冒泡 -->
<div id="app" >
  <div @click="divClick">
    <p>aaaaaa</p>
<!--    click.stop 阻止事件的冒泡-->
    <button @click.stop="btnClick">按钮</button>
  </div>


<!--  2.   .prevent修饰符的使用 阻止默认事件 ,阻止浏览器默认提交 使用自己的方法进行提交-->
  <form action="">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

<!--  3.  .监听键盘某个按键的点击-->
  <input type="text" @keyup.enter="keyUp">

<!--  4.  .once修饰符的使用 , 例子:使按钮只能触发一次-->
  <button @click.once="once">按钮2</button>

</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",

    },
    methods:{
      btnClick(){
        console.log('btnClick');
      },
      divClick(){
        console.log('divClick');
      },
      submitClick(){
        console.log('submitCLick');
      },
      keyUp(){
        console.log("enter被按下");
      },
      once(){
        console.log("按钮2被点击");
      }
    }

  })
</script>

</body>
</html>